<template>
  <div id="home-main-container" class="main-container">
    <div class="Block mc-left">
      <div class="content-top">
        <div class="BlockTitle"><h3>当前天气</h3></div>
        <div class="BlockBody">
          <div class="weather-content">
            <div class="wc wc-left" v-if="weathers && weathers.length > 0">
              <div class="wc-top">{{ weathers[0].name }}</div>
              <div class="wc-middle">
                <div class="wc-middle-left">
                  <span
                    class="icon weather"
                    v-html="weathers[0].situationicon"
                  ></span>
                </div>
                <div class="wc-middle-right">
                  <div class="temtemperature">
                    <span>{{ weathers[0].temperature }}</span
                    >℃
                  </div>
                  <div class="situation">{{ weathers[0].situation }}</div>
                </div>
              </div>
              <div class="wc-bottom">
                <div class="name">降雨量</div>
                <div class="value">
                  <span>{{ weathers[0].rainfall }}</span
                  >mm
                </div>
              </div>
            </div>
            <div class="wc wc-center"></div>
            <div class="wc wc-right" v-if="weathers && weathers.length > 1">
              <div class="wc-top">{{ weathers[1].name }}</div>
              <div class="wc-middle">
                <div class="wc-middle-left">
                  <span
                    class="icon weather"
                    v-html="weathers[1].situationicon"
                  ></span>
                </div>
                <div class="wc-middle-right">
                  <div class="temtemperature">
                    <span>{{ weathers[1].temperature }}</span
                    >℃
                  </div>
                  <div class="situation">{{ weathers[1].situation }}</div>
                </div>
              </div>
              <div class="wc-bottom">
                <div class="name">降雨量</div>
                <div class="value">
                  <span>{{ weathers[1].rainfall }}</span
                  >mm
                </div>
              </div>
            </div>
          </div>
          <div class="water-body">
            <div class="water-title"><h3>实时水位数据</h3></div>
            <div class="water-content">
              <chart-block
                v-if="waterOption"
                :option="waterOption"
              ></chart-block>
            </div>
          </div>
        </div>
      </div>
      <div class="content-bottom"></div>
    </div>
    <div class="Block mc-center"></div>
    <div class="Block mc-right"></div>
  </div>
</template>

<script>
import ChartBlock from "@components/ChartBlock";
import waterdatas from "@/datas/water.json";
// import * as echarts from "echarts";
export default {
  name: "home",
  components: {
    ChartBlock: ChartBlock,
  },
  data() {
    return {
      weathers: [
        {
          name: "潜江",
          // 天气情况
          situation: "小雨",
          // 天气情况图标
          situationicon: "&#xe690;",
          // 降雨量
          rainfall: 15,
          // 温度
          temperature: 33.1,
        },
        {
          name: "黄庄",
          // 天气情况
          situation: "晴",
          // 天气情况图标
          situationicon: "&#xe699;",
          // 降雨量
          rainfall: 14,
          // 温度
          temperature: 35.1,
        },
      ],
      waterOption: null,
    };
  },
  methods: {
    initWaterOption() {
      let legendData = ["上游水位", "下游水位"];
      let waterOption = {
        title: {
          // text: "Stacked Line",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
          // top: "4%",
          textStyle: {
            color: "#FDFDFC",
          },
        },
        grid: {
          left: 0,
          right: 6,
          top: 35,
          bottom: 0,
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        dataZoom: {
          type: "inside",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            // x轴样式
            lineStyle: {
              color: "#99A0A8",
            },
          },
          axisLabel: {
            color: "#99A0A8",
            formatter: function (value) {
              let labels = value.split(" ");
              if (labels.length > 0) {
                return labels.join("\n");
              } else value;
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位（m）",
          // offset: -20,
          nameTextStyle: {
            color: "#C2C8D0",
            nameLocation: "start",
          },
          axisLabel: {
            color: "#99A0A8",
          },
          //分隔线
          splitLine: {
            show: true,
            lineStyle: {
              // type: "dotted",
              color: "#99A0A8",
            },
          },
        },
        series: [
          {
            name: legendData[0],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            // stack: "Total",
            data: [],
          },
          {
            name: legendData[1],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            // stack: "Total",
            data: [],
          },
        ],
      };

      let xAxisData = [];
      let upData = [];
      let downData = [];
      for (let i = 0; i < waterdatas.rows.length; i++) {
        const row = waterdatas.rows[i];
        xAxisData.push(row.TM);
        if (row.Z) {
          downData.push(parseFloat(row.Z));
        } else {
          downData.push(null);
        }
        if (row.Q) {
          upData.push(parseFloat(row.Q));
        } else {
          upData.push(null);
        }
        // if (i >= 5225) {
        //   break;
        // }
      }

      //处理y轴最大、最小值
      let max1 = Math.max(...downData);
      let min1 = Math.min(...downData);
      let max2 = Math.max(...upData.filter((x) => x));
      let min2 = Math.min(...upData.filter((x) => x));
      let max = Math.ceil(Math.max(max1, max2) * 1.1 * 100) / 100;
      let min = Math.floor(Math.min(min1, min2) * 0.9 * 100) / 100;
      console.log(waterOption, max1, min1, max2, min2, max, min);

      waterOption.yAxis.min = min;
      waterOption.yAxis.max = max;
      waterOption.xAxis.data = xAxisData;
      waterOption.series[0].data = upData;
      waterOption.series[1].data = downData;

      this.waterOption = waterOption;
      // const waterChart = this.$refs.waterEchart;
      // if (waterChart) {
      //   const myChart = echarts.init(waterChart);
      //   const option = waterOption;
      //   myChart.setOption(option);
      //   window.addEventListener("resize", function () {
      //     myChart.resize();
      //   });
      //   this.$on("hook:destroyed", () => {
      //     window.removeEventListener("resize", function () {
      //       myChart.resize();
      //     });
      //   });
      // }
    },
    //页面初始化
    initPage() {
      // 初始化水位数据的参数
      this.initWaterOption();
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
#home-main-container {
  .mc-left {
    visibility: visible;
    margin-top: 15px;
    margin-left: 20px;
    width: 456px;
    height: 955px;

    .content-top {
      height: 490px;
      // height: 49.65%;

      .weather-content {
        height: 156px;
        display: flex;

        .wc {
          height: 100%;
          width: calc(50% - 1px);

          .wc-top {
            font-size: 20px;
            height: 30px;
            // height: 33%;
            text-align: center;
          }
          .wc-middle {
            // height: 33%;
            height: 90px;
            padding: 10px 0px;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .wc-middle-left {
              width: 86px;
              height: 100%;
              display: flex;
              align-items: center;

              .weather {
                font-size: 86px;
                line-height: 86px;
                color: #1ff8e6;
              }
            }

            .wc-middle-right {
              width: calc(100% - 86px);
              text-indent: 15px;

              .temtemperature {
                font-size: 18px;
                span {
                  font-size: 28px;
                }
              }

              .situation {
                font-size: 18px;
              }
            }
          }
          .wc-bottom {
            // height: 33%;
            height: 32px;
            display: flex;
            justify-content: center;
            font-size: 18px;

            .name {
              line-height: 32px;
              width: 80px;
              text-align: center;
            }
            .value {
              width: 92px;
              border-radius: 18px;
              line-height: 32px;
              text-align: center;
              background-color: #014562;
            }
          }
        }

        .wc-center {
          width: 1px;
          height: 100%;
          background-image: url(../../assets/svg/line.svg);
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
        }
      }

      .water-body {
        margin-top: 10px;
        height: calc(100% - 166px);

        .water-title {
          height: 46px;
          margin-left: 10px;
          margin-right: 5px;
          background-image: url(../../assets/svg/titleBg.svg);
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          font-size: 20px;

          h3 {
            color: #fff;
            margin: 0;
            padding-left: 10px;
            font-weight: normal;
            text-align: left;
          }
        }

        .water-content {
          height: calc(100% - 46px);
        }
      }
    }

    .content-bottom {
    }
  }

  .BlockTitle {
    height: 46px;
    background-image: url(../../assets/svg/BlockBg.svg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 20px;

    h3 {
      color: #fff;
      margin: 0;
      padding-left: 40px;
      padding-top: 3px;
      font-weight: normal;
      text-align: left;
    }
  }

  .BlockBody {
    flex: 1;
    padding: 10px 20px;
    padding-right: 15px;
    color: #fff;
    background-image: url(../../assets/svg/BlockBg.svg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100% - 46px);
    text-align: left;

    .tree-content {
      overflow-y: auto;
      height: 100%;
      height: calc(100% - 10px);

      .ant-tree {
        margin-left: 10px;
        font-size: 16px;
      }
    }
  }
}
</style>